<template>
    <div>
        <div>
            <el-row>
                <el-col :span="12" style="text-align:left;">
                   <el-button size="mini"  type="info" @click="eventPriceSort('asc')">按价格升序</el-button>
                   <el-button size="mini"  type="info" @click="eventPriceSort('desc')">按价格降序</el-button>
                </el-col>
                <el-col :span="12" style="text-align: right;">
                    <el-checkbox >备选项</el-checkbox>
                </el-col>
            </el-row>
        </div>


        <!--显示列表-->
        <div>
            <el-row>
                <el-col :span="6" v-for="(o, index) in tableData" :key="index">
                    <el-card :body-style="{ padding: '0px' }">
                        <img :src="'http://localhost:5286/' + o.coverImg" class="image">
                        <div style="padding: 14px;">
                            <span>{{ o.title }}</span>
                            <div class="bottom clearfix">
                                <span style="text-decoration: line-through;color:red;">原价：{{ o.martetPrice
                                }}</span><span>售价：{{ o.salePrice }}</span>
                                <el-button type="text" class="button">操作按钮</el-button>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>

        <!--分页-->
        <div>分页</div>
    </div>
</template>



<script>
export default {
    data() {
        return {
            currentDate: new Date(),
            tableData: [],
            sort:{
                sortField:'title',
                sortValue:'asc'
            }
        };
    },
    mounted() {
        this.onloadData()
    },
    methods: {
        eventPriceSort(sortValue){
            // //http://localhost:5286/goods?sortField=title&sortValue=asc&pageIndex=1&pageSize=10
            // let url='http://localhost:5286/goods?sortField=price&sortValue='+sortValue+'&pageIndex=1&pageSize=10'
            // this.$http.get(url).then(res => {
            //     console.log(res)
            //     if (res.data.code == 200) {
            //         this.tableData = res.data.data.items
            //     }
            // })
            this.sort.sortField = 'price'
            this.sort.sortValue = sortValue
            this.onloadData()
        },
        onloadData() {
            let url = 'http://localhost:5286/goods?sortField='+this.sort.sortField+'&sortValue='+this.sort.sortValue+'&pageIndex=1&pageSize=10'
            this.$http.get(url).then(res => {
                console.log(res)
                if (res.data.code == 200) {
                    this.tableData = res.data.data.items
                }
            })
        }
    }
}
</script>

<style>
.time {
    font-size: 13px;
    color: #999;
}

.bottom {
    margin-top: 13px;
    line-height: 12px;
}

.button {
    padding: 0;
    float: right;
}

.image {
    width: 100%;
    display: block;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}
</style>
